import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';

// 页面过渡动画组件，用于在路由切换时提供平滑的过渡效果
const PageTransition = ({ 
  children, 
  mode = 'fade',
  duration = 0.5,
  location 
}) => {
  // 不同过渡模式的动画配置
  const transitionVariants = {
    fade: {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 }
    },
    slideLeft: {
      initial: { x: '100%', opacity: 0 },
      animate: { x: 0, opacity: 1 },
      exit: { x: '-100%', opacity: 0 }
    },
    slideRight: {
      initial: { x: '-100%', opacity: 0 },
      animate: { x: 0, opacity: 1 },
      exit: { x: '100%', opacity: 0 }
    },
    slideUp: {
      initial: { y: '100%', opacity: 0 },
      animate: { y: 0, opacity: 1 },
      exit: { y: '-100%', opacity: 0 }
    },
    slideDown: {
      initial: { y: '-100%', opacity: 0 },
      animate: { y: 0, opacity: 1 },
      exit: { y: '100%', opacity: 0 }
    },
    scale: {
      initial: { scale: 0.8, opacity: 0 },
      animate: { scale: 1, opacity: 1 },
      exit: { scale: 1.2, opacity: 0 }
    },
    flip: {
      initial: { rotateY: 90, opacity: 0 },
      animate: { rotateY: 0, opacity: 1 },
      exit: { rotateY: -90, opacity: 0 }
    },
    legal: {
      initial: { 
        opacity: 0, 
        scale: 0.95,
        filter: 'blur(8px)'
      },
      animate: { 
        opacity: 1, 
        scale: 1,
        filter: 'blur(0px)'
      },
      exit: { 
        opacity: 0,
        scale: 1.05,
        filter: 'blur(8px)'
      }
    }
  };
  
  // 获取选择的过渡模式，默认为淡入淡出
  const selectedVariant = transitionVariants[mode] || transitionVariants.fade;
  
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={location?.pathname || Math.random()}
        initial="initial"
        animate="animate"
        exit="exit"
        variants={selectedVariant}
        transition={{
          duration,
          ease: "easeInOut"
        }}
        style={{ width: '100%', height: '100%' }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
};

export default PageTransition; 